<template>
	<div class="container">
		<CommonHeader :listOne="listOne" :listTwo="listTwo" :listThree="listThree" @logout="logout" />
		<CommonSearch
			:searchHistory="searchHistory"
			:searchRecordTwo="searchRecordTwo"
			@search="search"
			@deleteSearchHistory="deleteSearchHistory"
			@inputFocus="inputFocus"
		/>
		<div class="content">
			<SearchCity
				:provinceData="provinceData"
				@findCity="findCity"
				@searchData="searchData"
				:cityData="cityData"
        :searchList="searchList"
				@saveCityRecord="saveCityRecord"
			/>
      <HotCityAndVisited
				:hotCity="hotCity"
				:searchHistoryCity="searchHistoryCity"
				@saveCityRecord="saveCityRecord"
			/>
			<AlphabetInfo
				:alphabet="alphabet"
				:allCityList="allCityList"
				@saveCityRecord="saveCityRecord"
			/>
		</div>
	</div>
</template>

<script>
let pinyin = require('js-pinyin')
pinyin.setOptions({ checkPolyphone: false, charCase: 0 })
import search from '../../mixin/search'
import SearchCity from './components/searchCity'
import HotCityAndVisited from './components/hotCityAndVisited'
import AlphabetInfo from './components/cityDetail'
import CommonHeader from '../Common/commonHeader'
import CommonSearch from '../Common/commonSearch'
export default {
	name: 'ChangeCity',
	mixins: [search],
	data() {
		return {
			provinceData: [],
			/** 全部的省市信息 */
			list: [],
			cityData: [],
			allCity: [],
			/** 查询数据的列表 */
      searchList: [],
      /** 热门城市 */
			hotCity: [],
			/** 热门搜索的列表 */
			searchHistoryCity: [],
			/** 存字母的数组 */
			alphabet: [],
			/** 最详细的信息 */
			allCityList: []
		}
	},
	mounted() {
		this.getCityInfo()
		this.queryCityRecordAll()
	},
	methods: {
		/** 获取省市信息 */
		async getCityInfo() {
			let allCityOne = [],
				allCityTwo = []
			this.provinceData = []
			let res = await this.$api.queryCityData()
      this.list = res.result.provinces
      this.hotCity = res.result.hotCity
			res.result.provinces.forEach((item, index) => {
				this.provinceData.push({
					province: item.provinceName,
					active: false,
					index
				})
			})
			res.result.provinces.forEach(item => {
				allCityOne.push(item.provinceName)
				item.citys.forEach(item => {
					allCityTwo.push(item.citysName)
				})
			})
			this.allCity = allCityOne.concat(allCityTwo)
			/** 调用一个方法去处理更详细的数据 */
			this.dealAllAlphabetInfo(res.result.cityInfo)
		},
		/** 查找对应省下的市的信息 */
		findCity(province) {
			this.cityData = []
			this.list.forEach(item => {
				item.provinceName === province ? (this.cityData = item.citys) : ''
			})
		},
		/** 搜索城市数据 */
		searchData(content) {
			let arr = []
			let contents = content.toUpperCase()
			this.allCity.forEach(item => {
				if (
					item.includes(contents) ||
					pinyin
						.getFullChars(item)
						.toUpperCase()
						.includes(contents) ||
					pinyin
						.getCamelChars(item)
						.toUpperCase()
						.includes(contents)
				) {
					arr.push(item)
				}
			})
			this.searchList = [...new Set(arr)]
		},
		/** 查询城市的历史搜索记录 */
		async queryCityRecordAll() {
			let res = await this.$api.queryCityRecord()
			this.searchHistoryCity = res.result.searchCity
		},
		/** 当用户以几种条件去选择城市都调用这个方法把历史存储上 */
		saveCityRecord(city) {
			this.$api.cityRecord({city})
		},
		/** 处理更详细的信息数据 */
		dealAllAlphabetInfo(list) {
			this.alphabet = []
			list.forEach((item, index) => {
				this.alphabet.push({alphabet: item.initial, href: `#${index}`})
			})
			this.allCityList = list
		}
	},
	components: {
		CommonHeader,
		CommonSearch,
    SearchCity,
		HotCityAndVisited,
		AlphabetInfo
	}
}
</script>

<style lang="scss" scoped>
.container {
	background-color: #f8f8f8;
	.content {
		width: 1199px;
		box-sizing: border-box;
		margin: 20px auto 0;
		background-color: #fff;
		border: 1px solid #e5e5e5;
		border-radius: 4px;
		min-height: 1000px;
		padding: 20px;
	}
}
</style>